<template>
	<view class="">
		<view class="content">
			<view class="card">
				<view class="top-info items-center justify-between">
					<view class="name">
						{{info.name || ''}}
					</view>
					<view class="edit" @click="navTo(`/pages/public/declare?num=${info.num}`)">
						故障申报
					</view>
				</view>
				<view class="device items-center">
					<view class="item-status kong" v-if="info.status == 0">空闲</view>
					<view class="item-status zhong" v-if="info.status == 1">充电中</view>
					<view class="item-status li" v-if="info.status == 2">离线</view>
					<view class="items items-center">
						<view class="text">
							设备编号
						</view>
						<view class="num">
							{{info.num || ''}}
						</view>
					</view>
				</view>
				<view class="price-info items-center">
					<view class="left">
						价格信息
					</view>
					<view class="right" @click="showModel = true">
						计价标准
					</view>
				</view>
			</view>
			<view class="card">
				<view class="title">
					充电方式
				</view>
				<view class="list">
					<view 
					:class="['item',{active:isType == index}]" 
					v-for="(item,index) in timeList" :key="item"
					@click="handleClick(index)">
						{{item.label}}
					</view>
				</view>
			</view>
			<view class="card">
				<view class="title">
					支付方式
				</view>
				<view class="pay-type">
					<view class="item items-center justify-between">
						<view class="left items-center">
							<view class="icon">
								<image class="image-block" src="../../static/img/yue.png" mode=""></image>
							</view>
							<view class="text">
								<text>余额支付</text>
								<text style="color: #FD4E3C;margin-left: 10rpx;">(余额：{{info.balance || 0}}元)</text>
							</view>
						</view>
						<view class="right" @click="onClick">
							去充值
						</view>
					</view>
				</view>
			</view>
			<view class="btn" @click="submit">
				立即充电
			</view>
		</view>

		<mix-loading v-if="isLoading"></mix-loading>
		<u-popup mode="center" v-model="show" :maskCustomStyle="maskCustomStyle" :mask-close-able="false">
			<u-circle-progress ref="progress" active-color="#fe642b" :percent="100" duration="2000" @end="progressOnEnd">
				<view class="u-progress-content">
					<view class="u-progress-dot"></view>
					<text class="u-progress-info">连接中</text>
				</view>
			</u-circle-progress>
		</u-popup>
		
		<u-popup 
		v-model="showModel" 
		mode="bottom" 
		border-radius="20" 
		@close="close">
			<view class="popup">
				<view class="title">
					计价标准
				</view>
				<view class="box">
					<scroll-view scroll-y style="height: 100%;">
						<view class="item" v-for="(item,index) in priceList" :key="index">
							<text v-if="index == 0">0 ~ {{item.power}}w，{{item.price}}元/小时；</text>
							<text v-else>{{Number(priceList[index - 1].power) + 1}} ~ {{item.power}}w，{{item.price}}元/小时；</text>
						</view>
					</scroll-view>
					
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
export default {
	data() {
		return {
			orderId: '',
			show: false,
			showModel: false,
			maskCustomStyle: {
				opacity: 0
			},
			info: {
				status:'0'
			},
			cartName: '',
			form: {
				mode: 0,
				money: '',
				soc: '',
				carId: '',
				num: ''
			},
			isType:0,
			priceList:[],
			timeList:[{
				label:'充满自停',
				value:'0'
			},{
				label:'1小时',
				value:'1'
			},{
				label:'2小时',
				value:'2'
			},{
				label:'4小时',
				value:'4'
			},{
				label:'6小时',
				value:'6'
			},{
				label:'8小时',
				value:'8'
			}]
		};
	},
	onLoad(options) {
		console.log(options)
		if (options.num) this.form.num = options.num;
		if(options.q){
			this.form.num=(decodeURIComponent(options.q).split('?')[1]).split('=')[1];
		}
	},
	onShow() {
		this.loadData();
	},
	methods: {
		handleClick(index){
			this.isType = index
		},
		onClick() {
			this.navTo('/pages/tabs/chong')
		},
		close(){
			this.showModel = false
		},
		async loadData() {
			if(!uni.getStorageSync('uid')){
				// #ifdef APP-PLUS
				this.navTo('/pages/login/login');
				// #endif
				// #ifndef APP-PLUS
				this.navTo('/pages/public/login');
				// #endif
				return
			}
			const data = {
				uid: uni.getStorageSync('uid'),
				num: this.form.num
			};
			const res = await this.$request('recharge/scan-two', data, { showLoading: true });
			if (res.result == 0) {
				this.info = res.data;
				this.priceList = res.atRechargeStationPriceList
				if(res.data.status == '1'){
					uni.showModal({
						content:'此设备正在使用中!',
						showCancel:false,
						success: (e) => {
							if(e.confirm){
								this.switchTab('/pages/tabs/home')
							}
						}
					})
				}else if(res.data.status == '2'){
					this.$util.msg('此设备异常,请更换其他设备',{mask:true});
					setTimeout(()=>{
						this.switchTab('/pages/tabs/home')
					},2000)
				}
			} else {
				this.$util.msg(res.resultNote,{mask:true});
				setTimeout(()=>{
					this.switchTab('/pages/tabs/home')
				},2000)
			}
		},
		
		progressOnEnd() {
			this.show = false;
			uni.redirectTo({
				url:`/pages/order/bike-detail?id=${this.orderId}`
			})
		},
		async submit() {
			const data = {
				uid: uni.getStorageSync('uid'),
				mode:this.timeList[this.isType].value,
				num:this.form.num,
			};
			const res = await this.$request('recharge/start-two', data, { showLoading: true });
			if (res.result == 0) {
				this.orderId = res.data.id;
				this.show = true;
				this.$nextTick(()=>{
					this.$refs.progress.init()
				})
			} else {
				this.$util.msg(res.resultNote);
			}
		},
	}
};
</script>
<style scoped lang="scss">
.u-progress-content {
	display: flex;
	align-items: center;
	justify-content: center;
	.u-progress-dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		background-color: #fb9126;
	}
	.u-progress-info {
		font-size: 28rpx;
		padding-left: 16rpx;
		letter-spacing: 2rpx;
	}
}
.content{
	.card{
		background: #FFFFFF;
		margin-bottom: 20rpx;
		padding: 30rpx;
	}
	.top-info{
		padding: 30rpx 0;
		border-bottom: 1rpx solid #E7E7E7;
		.name{
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #222222;
			line-height: 38rpx;
		}
		.edit{
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #446CB2;
			line-height: 38rpx;
		}
	}
	.device{
		margin-top: 20rpx;
		.item-status{
			width: 126rpx;
			height: 126rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.active {
			border: 8rpx solid #fed16d;
		}
		.li {
			border: 8rpx solid #facfbc;
		}
		.zhong {
			border: 8rpx solid #6dbd5b;
		}
		.kong {
			border: 8rpx solid $uni-color-bg;
		}
		.items{
			margin-left: 50rpx;
			.text{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
			.num{
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #222222;
				margin-left: 30rpx;
			}
		}
	}
	.price-info{
		margin-top: 20rpx;
		.left{
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #222222;
		}
		.right{
			width: 143rpx;
			height: 54rpx;
			background: #FAFAFA;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 54rpx;
			text-align: center;
			margin-left: 30rpx;
		}
	}
	.title{
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 100rpx;
	}
	.list{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.item{
			width: 150rpx;
			height: 55rpx;
			background: #FAFAFA;
			border-radius: 10rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			color: #999999;
			line-height: 55rpx;
			text-align: center;
			margin: 0 20rpx 20rpx 0;
		}
		.active{
			border: 2rpx solid $uni-color-bg;
			border-radius: 10rpx;
			font-weight: bold;
			color: $uni-color-bg;
			background-color: #fff;
		}
	}
	.pay-type{
		.item{
			.left{
				.icon{
					width: 46rpx;
					height: 46rpx;
					.image-block{
						width: 100%;
						height: 100%;
					}
				}
				.text{
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #333333;
					line-height: 36rpx;
					margin-left: 20rpx;
				}
			}
			.right{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #0091FE;
				line-height: 36rpx;
			}
		}
	}
	.btn{
		width: 640rpx;
		height: 110rpx;
		background: $uni-color-bg;
		border-radius: 55rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #fff;
		line-height: 110rpx;
		text-align: center;
		margin: 50rpx auto 0;
	}
}

.popup{
	padding: 50rpx;
	.title{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		text-align: center;
		margin-bottom: 30rpx;
	}
	.box{
		width: 658rpx;
		height: 356rpx;
		background: #FAFAFA;
		border-radius: 20rpx;
		box-sizing: border-box;
		overflow: auto;
		padding: 30rpx;
	}
	.item{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 60rpx;
	}
}
</style>
